<script setup lang="ts">
  import { Position, Handle } from '@vue-flow/core'
  import { NodeToolbar } from '@vue-flow/node-toolbar'

  // props were passed from the slot using `v-bind="customNodeProps"`
  const props = defineProps<{
    data: any
    id: string
    type: string
    postion: any
  }>()

  console.log('props______', props)
</script>

<template>
  <div>
    <NodeToolbar :is-visible="data.toolbarVisible" :position="data.toolbarPosition">
      <button>delete</button>
      <button>copy</button>
      <button>expand</button>
    </NodeToolbar>
    <Handle type="target" :position="Position.Right" />
    <div class="box">{{ data.label }}</div>
    <Handle type="source" :position="Position.Top" />
  </div>
</template>
<style scoped lang="less">
  .box {
    background-color: rgb(64, 90, 143);
    width: 180px;
    height: 60px;
    border: 1px solid grey;
    border-radius: 4px;
    line-height: 60px;
    text-align: center;
  }
</style>
